<template>
  <div class="app-container">
    <button @click="onAdd">新增</button>
    <!-- 列表数据 -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
      max-height="600"
    >
      <el-table-column
        prop="billingDate"
        label="开单日期"
        width="150"
      />
      <el-table-column
        prop="proposer"
        label="提出者"
        width="200"
      />
      <el-table-column
        prop="number"
        label="编号"
        width="120"
      />
      <el-table-column
        prop="occurrenceUnit"
        label="发生单位"
        width="120"
      />
      <el-table-column
        prop="state"
        label="状态"
        width="200"
      />
      <el-table-column
        prop="disposalInstructions"
        label="处置说明"
        width="200"
      />
      <el-table-column
        prop="proposer"
        label="提出者"
        width="120"
      />
      <el-table-column
        prop="disposalInstructions"
        label="处置说明"
        width="300"
      />
      <el-table-column
        prop="productName"
        label="品名"
        width="120"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <!-- 编辑 -->
          <el-button type="primary" icon="el-icon-edit" size="small" circle @click="onRowEdit(scope.row)" />
          <!-- 删除 -->
          <el-button type="danger" icon="el-icon-delete" circle size="small" @click="onRowDelete(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      :current-page="pagination.page"
      :page-sizes="[10,50,100,200]"
      :page-size="pagination.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹窗 -->
    <el-dialog :close-on-click-modal="false" title="提示" :visible.sync="dialogFormVisible" width="90%" @closed="close">
      <Edit ref="refsFromData" :formdate="dataFromold" @FromData="newFromData" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Edit from './edit'
export default {
  components: { Edit },
  data() {
    return {
      // 分页
      pagination: {
        // 每页条数
        limit: 10,
        // 当前页数
        page: 1,
        // 总条数
        count: 0
      },
      // 搜索栏表单数据
      formData: {
        occurrenceUnit: '',
        unitHead: '',
        proposer: '',
        nonconformingItems: '',
        state: ''
      },
      // 列表数据
      tableData: [{
        billingDate: '2016-05-03',
        proposer: '王小虎',
        number: '模治具、设备',
        id: 1,
        occurrenceUnit: '上海',
        state: '普陀区',
        disposalInstructions: '上海市普陀区金沙江路 1518 弄',
        productName: 200333
      },
      {
        billingDate: '2016-05-04',
        proposer: '王类乎',
        number: '模治',
        id: 2,
        occurrenceUnit: '北京',
        state: '朝阳区',
        disposalInstructions: '北京市照样区金沙江路 1518 弄',
        productName: 20007763
      }],
      // 判断从哪点击
      fromed: '',
      // 弹窗的显示与隐藏
      dialogFormVisible: false,
      // 要传给子组件的表单数据
      dataFromold: {},
      // 传过来的数据
      datafrom: {}
    }
  },
  created() {

  },
  methods: {
    // 查询
    query() {},
    // 新增
    onAdd() {
      this.fromed = 'b'
      this.dialogFormVisible = !this.dialogFormVisible
    },
    // 编辑
    onRowEdit(val) {
      console.log(val)
      this.fromed = 'a'
      // 把 该行 的数据发送给 需要传给子组件的数据
      this.dataFromold = val
      this.dialogFormVisible = !this.dialogFormVisible
      // 首次创建子组件实例是需要时间的，用$refs访问子组件的前提是子组件实例已经创建出来
      // 首次又恰好无需刷新子组件，所以只要判断此时有没有子组件(没有 => 首次，有 => 非首次)
      // 非首次的情况下，调用自组件内的刷新方法
      console.log(this.$refs.refsFromData) // 结果undefand
      if (this.$refs.refsFromData) {
        this.$refs.refsFromData.refreshForm()

        // setTimeout(() => {
        //   this.$refs.refsFromData.refreshForm()
        // }, 100)
      }
    },
    // 删除
    onRowDelete(val) {
      console.log(val)
    },
    // 分页的点击事件
    handleSizeChange() {},
    handleCurrentChange() {},
    // 弹窗的点击事件
    close() {
      // 弹窗上面的❌号点击 调用子组件的清除表单方法
      this.$refs.refsFromData.RemoveFromDated()
    },
    newFromData(val) {
      // 把子组件传来的数据保存到父组件里
      this.datafrom = val
      // 此时 子组件传来的值 已经赋值给 datafrom 了， 点击确定的时候可以取这个值发送请求
      console.log('@@@', this.datafrom)
    },
    determine() {
      // 调用子组件的子传值给父组件的方法
      this.$refs.refsFromData.refsfromdated()

      if (this.fromed === 'a') {
        console.log('从表格内点击的打开弹窗')
      } else if (this.fromed === 'b') {
        console.log('从新增点击的打开弹窗')
      }
      this.$refs.refsFromData.RemoveFromDated()
      this.dialogFormVisible = !this.dialogFormVisible
    }
  }
}
</script>
